<template>
    <div>
        <el-table v-loading="vLoading" :data="data" :height="bodySize.height-subHeight" border row-key="id" ref="elTableTree" :indent="20" :highlight-current-row="highlightCurrentRow"
            @row-dblclick="rowdblClick" @row-click="rowClick" @row-contextmenu="rowContextmenu" @selection-change="selectionChange" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="selection" width="40" v-if="checkBox"></el-table-column>
            <el-table-column type="index" label="序号" v-if="showIndex" :index="CalcTableIndex()" width="80">
                <template #header>
                    <div v-if="selectTableRow" class="p-table-clear-select" @click="clearSelectTable">取消选中</div>
                    <div v-else>序号</div>
                </template>
            </el-table-column>
            <slot></slot>
        </el-table>
        <div style="height:10px;" v-if="showPaginate"></div>
        <p-pagination v-if="showPaginate" v-model="paginate" @change="paginateChange"></p-pagination>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    nextTick,
    onMounted,
    reactive,
    ref,
    toRefs,
    watch,
} from "vue";
import { useStore } from "vuex";
import { IPaginate, defaultPaginate, CalcTableIndex } from "@/lib/IApp";
import PPagination from "@/components/PPagination.vue";
import TreeTool from "@/lib/TreeTool";
/**
 * state 数据类型
 */
interface IState {
    /**
     * 分页对象
     */
    paginate: IPaginate;
    selectTableRow: any;
}
export default defineComponent({
    name: "PTableTree",
    components: { PPagination },
    props: {
        modelValue: {
            type: Object,
            default: () => defaultPaginate,
        },
        keyName: {
            type: String,
            default: "title",
        },
        labelName: {
            type: String,
            default: "标题",
        },
        // 是否显示加载状态
        vLoading: {
            type: Boolean,
            default: false,
        },
        // 是否显示 分页工具
        showPaginate: {
            type: Boolean,
            default: true,
        },
        // 是否显示 选择框
        checkBox: {
            type: Boolean,
            default: true,
        },
        // 是否显示 序号
        showIndex: {
            type: Boolean,
            default: false,
        },
        // 是否默认选择第一行
        selectFirst: {
            type: Boolean,
            default: false,
        },
        // 当前是否是 选择状态
        select: {
            type: Boolean,
        },
        // 是否高亮行
        highlightCurrentRow: {
            type: Boolean,
            default: true,
        },
        // 数据列表
        data: {
            type: Array,
            default: () => [],
        },
        //  表格高度=窗口高度 - subHeight
        subHeight: {
            type: Number,
            default: 0,
        },
    },
    emits: [
        "row-click",
        "paginate",
        "row-dblclick",
        "row-clear",
        "selection-change",
    ],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const elTableTree: any = ref<any>();
        const state = reactive<IState>({
            paginate: defaultPaginate,
            selectTableRow: null,
        });
        watch(
            () => props.modelValue,
            (val) => {
                state.paginate = val as IPaginate;
            }
        );
        watch(
            () => props.data,
            (val) => {
                if (props.selectFirst && val.length > 0) {
                    nextTick(() => {
                        state.selectTableRow = val[0];
                        elTableTree.value.setCurrentRow(state.selectTableRow);
                        emit("row-click", {
                            row: state.selectTableRow,
                            column: {},
                        });
                    });
                }
            }
        );
        onMounted(() => {
            state.paginate = props.modelValue as IPaginate;
        });
        /**
         * 选中页码回调
         */
        const paginateChange = () => {
            emit("paginate", state.paginate);
        };
        /**
         * 当某一行被点击时会触发该事件
         */
        const rowClick = (row: any, column: any, event: MouseEvent) => {
            if (props.highlightCurrentRow) {
                state.selectTableRow = row;
            }
            emit("row-click", { row, column, event });
        };
        /**
         * 当某一行被双击时会触发该事件
         */
        const rowdblClick = (row: any, column: any, event: MouseEvent) => {
            emit("row-dblclick", { row, column, event });
        };
        // 取消选中行
        const clearSelectTable = () => {
            state.selectTableRow = null;
            elTableTree.value.setCurrentRow();
            emit("row-clear");
        };
        // 多选是触发
        const selectionChange = (val: any[]) => {
            emit("selection-change", val);
        };
        /**
         * 当某一行被鼠标右键点击时会触发该事件
         */
        const rowContextmenu = (row: any, column: any, event: MouseEvent) => {
            clearSelectTable();
        };
        // 清除选择
        const clearSelect = () => {
            state.selectTableRow = null;
            elTableTree.value.setCurrentRow();
        };
        return {
            UIAuth,
            bodySize,
            CalcTableIndex,
            elTableTree,
            ...toRefs(state),
            paginateChange,
            rowClick,
            rowdblClick,
            rowContextmenu,
            selectionChange,
            clearSelectTable,
            clearSelect
        };
    },
});
</script>

<style lang="scss">
.p-table-clear-select {
    color: $primary-color;
    cursor: pointer;
    &:hover {
        color: $primary-color-active;
    }
}
</style>
